import { observable, computed, action } from 'mobx';
import { Element } from 'stores/models/core/nodeWithList';
import { stringExtendStyle } from 'common/utils/style';
import motionCONST from 'common/const/observer/motion';

export default class FrameImageModel extends Element {

  constructor(parent, element) {
    super();

    const props = {
      parent,
      // icon: 'icon-image',
      type: 'frameImage',
      constType: 'base',
      label: '帧图片',
      realId: element.realId ? element.realId : element.id, // 元素存在realId就继承realId,否则为元素id
      src: element.src
    };

    let observableProps = {};

    motionCONST.forEach(item => {
      if (element[item.key]) {
        observableProps[item.key] = element[item.key];
      } else {
        observableProps[item.key] = item.val;
      }
    });

    this.init({props, observableProps});
  }


  @computed get style() {
    return {
      width: this.width,
      height: this.height,
      top: this.top,
      left: this.left,
      opacity: this.opacity / 100,
      borderRadius: `${this.borderRadius / 2}%`,
      borderWidth: this.borderWidth,
      borderStyle: this.borderStyle,
      borderColor: this.borderColor,
      filter: stringExtendStyle([
        {
          key: 'blur',
          val: this.blur
        }
      ]),
      transform: stringExtendStyle([
        {
          key: 'rotate',
          val: this.rotate
        },
        {
          key: 'rotateX',
          val: this.rotateX
        },
        {
          key: 'rotateY',
          val: this.rotateY
        },
        {
          key: 'skewX',
          val: this.skewX
        },
        {
          key: 'skewY',
          val: this.skewY
        },
        {
          key: 'scaleX',
          val: this.scaleX
        },
        {
          key: 'scaleY',
          val: this.scaleY
        }
      ]),
      transformOrigin: `${this.transformOriginX} ${this.transformOriginY}`
    };
  }
}
